<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style type="text/css">
		p{
			width: 100px;
			height: 100px;
			background-color: antiquewhite;
		}
		p:hover{
			animation-duration: 500ms;
			animation-delay: 200ms;
			animation-name: 永劫无间;
			animation-iteration-count: infinite; /* 数数 */
			animation-direction: alternate;
		}
		@keyframes 永劫无间{
			from{width: 100px;
				height: 100px;
				background-color: #8B4513;
			}
			50%{width: 125px;
				height: 125px;
				background-color: aquamarine;
				
			}
			75%{width: 150px;
				height: 150px;
				background-color: darkseagreen;
				
			}
			to{
				width: 200px;
				height: 200px;
				background-color: #FFD700;
			}
		}
		</style>
	</head>
	<body>
		<p></p>
	</body>
</html>
